<template>
	<view>
		<view class="an-notice-box" :style="'background-color: '+bgColor+';'">
			<image class="icon" src="/static/lj/home/icon_details.png" mode="aspectFill"></image>
			<scroll-view class="an-notice-content">
				<swiper v-if="show" class="swiper" :autoplay="true" :interval="switchTime*1000" :duration="1500" :circular="true" :vertical="true">
					<swiper-item v-for="(text, index) in list" :key="index" :item-id="index.toString()" class="an-notice-content-item"
					@click="Onbar(text)">
						<view class="swiper-item">
							<text class="an-notice-content-item-text" :style="'color: '+color+';'">
								<text v-if="list.length > 1 || _showSerial">{{index+1+'. '}}</text>
								{{text.name}}
							</text>
						</view>
					</swiper-item>
				</swiper>
			</scroll-view>
			<!-- <view class="an-notice-content">
				<view v-for="(text, index) in list" :key="index" v-if="number == index" class="an-notice-content-item" :style="'animation: anotice '+switchTime+'s linear;'">
					<text class="an-notice-content-item-text" :style="'color: '+color+';'">
						<text v-if="_showSerial">{{index+1+'. '}}</text>
						{{text}}
					</text>
				</view>
			</view> -->
	<!-- 		<view class="an-notice-more" @click="more">
				<text>查看更多</text>
				<uni-icons type="arrowright" color="#999" size="12" />
			</view> -->
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons
		},
		props:{
			text: {
				type: Array,
				default: []
			}, 
			color: {
				type: String,
				default: '#de8c17'
			},
			bgColor: {
				type: String,
				default: '#fffff5'
			},
			switchTime: {
				type: Number,
				default: 3
			},
			showSerial: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				number: 0,
				list: [],
				copyText: '',
				show: '',
				_showSerial: false,
			};
		},
		mounted() {
			this._showSerial = this.showSerial
			this.list = this.text
			if(this.list.length > 1){
				this._showSerial = true;
			}
			this.show = true;
			/* this.number = 0;
			this.startMove(); */
		},
		watch: {
			text: function () {
				this.show = true;
				if(this.text != this.copyText){
					this.copyText = this.text;
					this.list = this.text
					if(this.list.length > 1){
						this._showSerial = true;
					}
				}
				/* this.number = 0;
				this.startMove(); */
			}
		},
		methods: {			
			/* startMove () {
			  // eslint-disable-next-line
			  let timer = setTimeout(() => {
				if (this.number === this.list.length-1) {
				  this.number = 0;
				} else {
				  this.number += 1;
				}
				this.startMove();
			  }, this.switchTime*1000);
			}, */
			more(){
				this.show = false;
				this.$emit('more')
			},
			Onbar(e){
				this.$emit('Onbar',e)
			}
		}
	}
</script>

<style>
	.swiper{
		height: 60upx!important;
	}
	.an-notice-box{
		width: 100%; 
		height: 64rpx; 
		line-height: 64rpx;
		padding: 0 20rpx;
		overflow: hidden; 
		/* margin: 20upx 0; */
		display: flex; 
		justify-content: flex-start;
		align-items: center;
	}
	.an-notice-icon{
		/* width: 60upx; */
		width: 150upx;
		height: 50rpx;
		/* height: 60upx; */
		line-height: 50upx; 
		text-align: center; 
		position: relative;
		border: 1rpx #6bcbb6 solid;
		border-radius: 10rpx;
		font-size: 14px;
		color: #6bcbb6;
		margin-right: 10upx;
		
	}
	.icon{
		width: 32rpx;
		min-width: 32rpx;
		height: 32rpx;
		margin-left: 50rpx;
		margin-right: 10rpx;
	}
	.an-notice-content{
		width: calc(100% - 190upx); 
		position: relative; 
		font-size: 14px;
	}
	.an-notice-content-item{
		width: 100%; 
		height: 60upx; 
		text-align: left; 
		line-height: 60upx;
	}
	.an-notice-content-item-text{
		display: block; 
		white-space: nowrap; 
		text-overflow: ellipsis; 
		overflow: hidden;
	}
	.an-notice-more{
		/* width: 130upx; 
		height: 60upx; 
		font-size: 12px; 
		line-height: 60upx; 
		text-align: right; 
		color: #999; */
	}
	
	@keyframes anotice {
		 0%  {transform: translateY(100%);}
	    30%  {transform: translateY(0);}
	    70%  {transform: translateY(0);}
	   100%  {transform: translateY(-100%);}
	}
</style>
